﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Jet.Payment.Cielo.Sample.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .creditcard {
            width: 81px;
            height: 50px;
            background-image: url(creditcard.png);
            background-repeat: no-repeat;
            display: inline-block;
        }

        .visa {
            background-position: 0px 0px;
        }

            .visa:hover {
                background-position: 0px -50px;
            }

        .mastercard {
            background-position: -82px 0px;
        }

            .mastercard:hover {
                background-position: -82px -50px;
            }

        .diners {
            background-position: -164px 0px;
        }

            .diners:hover {
                background-position: -164px -50px;
            }

        .amex {
            background-position: -246px 0px;
        }

            .amex:hover {
                background-position: -246px -50px;
            }

        .elo {
            background-position: -328px 0px;
        }

            .elo:hover {
                background-position: -328px -50px;
            }
    </style>
    <script src="Scripts/jquery-2.1.1.js"></script>
    <script type="text/javascript">
        $(function () {
            var fnSetType = function () {
                if ($('[name*=rdType]:checked').val() == 'C') {
                    $('.creditcard').show();
                }
                else {
                    $('.creditcard').hide();
                    $('.visa,.mastercard').show();
                }

            }
            $('[name*=rdType]').click(fnSetType);
            fnSetType();
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="form-group">
                <div class="col-md-8">
                    <asp:RadioButtonList runat="server" ID="rdType" RepeatLayout="Table" RepeatDirection="Horizontal" Width="200px">
                        <asp:ListItem Text="Débito" Value="D" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Crédito" Value="C"></asp:ListItem>
                    </asp:RadioButtonList>
                </div>
                <label class="col-md-12 small">&nbsp;</label>
                <label class="col-md-12 small">Bandeira:</label>
                <div class="col-md-8">
                    <asp:LinkButton ID="LinkButton1" runat="server" OnClick="lnkCreditCardSelection_Click" CommandArgument="Visa" class="creditcard visa"></asp:LinkButton>
                    <asp:LinkButton ID="LinkButton2" runat="server" OnClick="lnkCreditCardSelection_Click" CommandArgument="Mastercard" class="creditcard mastercard"></asp:LinkButton>
                    <asp:LinkButton ID="LinkButton3" runat="server" OnClick="lnkCreditCardSelection_Click" CommandArgument="Diners" class="creditcard diners"></asp:LinkButton>
                    <asp:LinkButton ID="LinkButton4" runat="server" OnClick="lnkCreditCardSelection_Click" CommandArgument="AmericanExpress" class="creditcard amex"></asp:LinkButton>
                    <asp:LinkButton ID="LinkButton5" runat="server" OnClick="lnkCreditCardSelection_Click" CommandArgument="Elo" class="creditcard elo"></asp:LinkButton>
                </div>
            </div>
        </div>
        </div>
    </form>
</body>
</html>
